﻿@using ProjectManagement.Domain.Services;
@{
    Layout = null;
	var prolist = (new ProvienceService()).QueryAll();
}

<!DOCTYPE html>

<html>
<head>
    <title>AlterPC</title>
	<style type="text/css">
		.alter
		{
			background:#eeeeee;
			width:500px;
			margin:0 auto;
			display:none;
			position:relative;
		}
		span
		{
			color:red;
			cursor:hand;
		}
		span:hover
		{
			color:black;
			background:#d3e33b;
		}
		.cit
		{
			display:none;
		}
	</style>
	<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
	<script src="../../Scripts/jquery-ui-1.8.22.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function () {
			$('#pandc').click(function () {
				$('.alter').css('display', 'block');
				$("#draggable").draggable();
			});
			$(function () {
				$('.pro span').click(function () {
					var ids = $(this).attr('value');
					$('.cit').css('display', 'block');
					$.ajax({
						url: 'GetSelectedList',
						type: 'Post',
						data: { id: ids },
						success: function (result) {
							$.each(result, function (i) {
								$(".cit").append("<span value='" + result[i]["ID"] + "'>" + result[i]["Name"] + "</span>");
							});
						}
					});
				});
			});
		});
	</script>
</head>
<body>
    <div class="alter" id="draggable">
          <div class="pro">
				<p>选择省</p>
				@foreach (var item in prolist)
				{
					<span value="@item.ID">@item.Name</span>
				}
		  </div>
		  <div class="cit">
				 <p>选择市</p>
		  </div>
    </div>
	<p>选择省市</p>
	<input type="text" name="" id="pandc"  value=""/>

</body>
</html>
